<!DOCTYPE HTML>
<html th:with="title='编辑模板'">
<head th:include="fragments/UEheader :: header">
</head>
<body id="app">
	<div class="page-container">
		<form action="/manager/appTemplate/update" method="post" class="form form-horizontal" id="appTemplate-form">
			<input type="hidden" name="id" v-model="appTemplate.id" />
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					名称：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<input type="text" class="input-text size-L" v-model="appTemplate.name" id="name" name="name">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					分辨率：
				</label>
				<div class="formControls col-xs-4 col-sm-4 skin-minimal">
					<input type="text" class="input-text size-L" v-model="appTemplate.resolution" id="resolution" name="resolution">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					选择类型：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<select class="input-text size-L" id="templateType" name="templateType">
						<option></option>
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					屏幕设置：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<span class="select-box">
						<select class="select size-L" id="showType" name="showType" v-model="appTemplate.showType">
							<option value="0">横屏</option>
							<option value="1">竖屏</option>
							<option value="2">待设置</option>
						</select>
					</span>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					是否启用：
				</label>
				<div class="formControls col-xs-3 col-sm-3 skin-minimal">
					<div class="radio-box">
						<input name="backgroundContent" id="enableViolet" type="radio" name="status" value="1">
						<label for="enableViolet">启用</label>
					</div>
					<div class="radio-box">
						<input name="backgroundContent" id="disableViolet" type="radio" name="status" value="0">
						<label for="disableViolet">停用</label>
					</div>
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary size-L radius" type="submit" value="提交">
					<input class="btn btn-primary size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript">

		var app = new Vue({
			el : '#app',
			data : {
				appTemplate : [],
				templateTypes : []
			}
		});
		function closeWin() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}

		$(function() {
			get();
			/* 初始化单选框样式 */
			$('.skin-minimal input').iCheck({
				checkboxClass : 'icheckbox-blue',
				radioClass : 'iradio-blue',
				increaseArea : '20%'
			});
			$("#appTemplate-form").validate({
				rules : {
					name : {
						required : true
					},
					resolution : {
						required : true
					},
					templateType : {
						required : true
					},
					status : {
						required : true
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					var data = $('#appTemplate-form').serialize();
					$.ajax({
						type : "POST",
						url : '/manager/appTemplate/update',
						data : data,
						beforeSend : function() {

						},
						complete : function() {

						},
						error : function(request) {
							layer.alert("系统出错");
						},
						success : function(data) {
							if (data.status == 0) {
								refreshUParentList();
								layer.alert(data.message, function() {
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});

		function getIdFromUrl() {
			var addr = location.href;
			var index = addr.lastIndexOf('/') + 1;
			var id = addr.substr(index);
			return id;
		}

		//获取当前营销详情
		function get() {
			var id = getIdFromUrl();
			$.ajax({
				type : "POST",
				url : '/manager/appTemplate/get/' + id,
				beforeSend : function() {
				},
				complete : function() {
				},
				error : function(request) {
					alert("Connection error");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						if (data[0].status == "1") {
							$("#enableViolet").iCheck('check');
						}
						if (data[0].status  == "0") {
							$("#disableViolet").iCheck('check');
						}
						app.appTemplate = data[0];
						queryTemplate(data[0].templateType.id,data[1]);
					}
				}
			});
		}

		var queryTemplate = function(templateTypeId,datas){
			var obj = document.getElementById("templateType");
			obj.options.length = 0;
			var bb = $(document).find("#templateType");
			for ( var i = 0; i < datas.length; i++) {
				if(templateTypeId==datas[i].id){
					bb.append("<option value='" + datas[i].id + "' selected>" + datas[i].templateTypeName + "</option>");
				}else{
					bb.append("<option value='" + datas[i].id + "'>" + datas[i].templateTypeName + "</option>");
				}
			}
		}
	</script>
</body>
</html>